﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="Cookbook.RecipeDetailPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Cookbook"
    xmlns:common="using:Cookbook.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.BottomAppBar>
        <AppBar x:Name="BottamApp" Padding="10,0,10,0" MinHeight="90" Background="#DC9C753E" BorderBrush="#FF9C753E">
            <Grid x:Name="grid" Margin="0,10" Height="71">
            	<Button x:Name="BottApp1" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource BottApp}" Padding="0,0,0,4" Margin="40,0,0,0">
            		<Image HorizontalAlignment="Left" Height="61" VerticalAlignment="Top" Width="73" Source="Assets/AppBott.png"/>
            	</Button>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
    <Page.Resources>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
    	<Grid.Background>
    		<ImageBrush ImageSource="Assets/bg.png" Stretch="UniformToFill"/>
    	</Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <ScrollViewer x:Name="scrollViewer" Grid.Row="1" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Margin="-16,0,0,0">
        	<Grid x:Name="MainGrid" Margin="120,0,0,0">
        		<Grid.ColumnDefinitions>
        			<ColumnDefinition Width="410"/>
        			<ColumnDefinition Width="30"/>
        			<ColumnDefinition Width="321"/>
        			<ColumnDefinition Width="30"/>
        			<ColumnDefinition Width="435"/>
					 <ColumnDefinition Width="30"/>
        			<ColumnDefinition Width="450"/>
					<ColumnDefinition Width="30"/>
        		</Grid.ColumnDefinitions>
        		<Grid x:Name="FirstGrid" VerticalAlignment="Top">
        			<Grid.RowDefinitions>
        				<RowDefinition Height="270"/>
        				<RowDefinition Height="15"/>
        				<RowDefinition Height="Auto"/>
        			</Grid.RowDefinitions>
        			<Image Source="Assets/RecipeDetailPage/DetalPic12.png" Stretch="Fill" VerticalAlignment="Top"/>
        			<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="This is perhaps the most famous south indian brahmin dish This is brahmin dish A rice and lentil pancake with a the most famous south indian brahmin dish A rice" VerticalAlignment="Top" Grid.Row="3" FontFamily="Segoe UI" FontWeight="Light" FontSize="29"/>
        		</Grid>
        		<StackPanel Grid.Column="2" Orientation="Vertical">
        			<StackPanel VerticalAlignment="Top" Margin="0,0,0,20">
        				<TextBlock TextWrapping="Wrap" Text="Ingredients" FontFamily="Segoe UI" FontSize="33" Foreground="#FFFF9600"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="1 1/2 cups rice " FontFamily="Segoe UI" FontSize="25" Foreground="White" FontWeight="Light"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="1/2 cup urad dal " FontFamily="Segoe UI" FontSize="25" Foreground="White" FontWeight="Light"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="salt to taste Oil" FontFamily="Segoe UI" FontSize="25" Foreground="White" FontWeight="Light"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="Oil" FontFamily="Segoe UI" FontSize="25" Foreground="White" Margin="0,0,0,20" FontWeight="Light"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top" Margin="0,0,0,20">
        				<TextBlock TextWrapping="Wrap" Text="Masala Filling" FontFamily="Segoe UI" FontSize="33" Foreground="#FFFF9600"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="2 large potatoes" FontFamily="Segoe UI" FontSize="25" Foreground="White" FontWeight="Light"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="1 medium onion (chopped)" FontFamily="Segoe UI" FontSize="25" Foreground="White" FontWeight="Light"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="1/2 teaspoon yellow split peas" FontFamily="Segoe UI" FontSize="25" Foreground="White" FontWeight="Light"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="1/2 teaspoon mustard seed" FontFamily="Segoe UI" FontSize="25" Foreground="White" Margin="0" FontWeight="Light"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="1 tablespoon oil salt to taste " FontFamily="Segoe UI" FontSize="25" Foreground="White" Margin="0" FontWeight="Light"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="1/2 teaspoon yellow split peas" FontFamily="Segoe UI" FontSize="25" Foreground="White" FontWeight="Light"/>
        			</StackPanel>
        		</StackPanel>
        		<StackPanel Grid.Column="4" Orientation="Vertical">
        			<StackPanel VerticalAlignment="Top" Margin="0,0,0,20">
        				<TextBlock TextWrapping="Wrap" Text="How to Prepare" FontFamily="Segoe UI" FontSize="33" Foreground="#FFFF9600"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top" Margin="0,0,0,20">
        				<TextBlock TextWrapping="Wrap" Text="Dosa shell" FontFamily="Segoe UI" FontSize="33" Foreground="#FFFF9600"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="Separately soak rice and urad dal at least 6 hour or overnight in water. 
Grind to paste. 
Mix together, add salt with water to make batter. 
Leave in room temperature overnight. 
Mix onion and chilies to the thin batter. 
Heat pan or griddle with little ghee or oil. 
Spread the mix on pan in circular motion to make thin Dosa. 
Cook on both the sides.  " FontFamily="Segoe UI" FontSize="25" Foreground="White" FontWeight="Light" LineStackingStrategy="BlockLineHeight" LineHeight="32"/>
        			</StackPanel>
        		</StackPanel>
        		<StackPanel Grid.Column="6" Orientation="Vertical">
        			<StackPanel VerticalAlignment="Top" Margin="0,65,0,20">
        				<TextBlock TextWrapping="Wrap" Text="Masala Filling (Spicy Filling): " FontFamily="Segoe UI" FontSize="33" Foreground="#FFFF9600"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="Heat oil. " FontFamily="Segoe UI" FontSize="25" Foreground="White" FontWeight="Light"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="Add mustard seed, peas, onions and spice. " FontFamily="Segoe UI" FontSize="25" Foreground="White" FontWeight="Light"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="Fry for about 5 minutes on medium heat until onions are turned into golden brown. " FontFamily="Segoe UI" FontSize="25" Foreground="White" FontWeight="Light"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="Add potatoes and mix and cook some more" FontFamily="Segoe UI" FontSize="25" Foreground="White" FontWeight="Light"/>
        			</StackPanel>
        			<StackPanel VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" Text="Add filling inside Dosa and roll.  " FontFamily="Segoe UI" FontSize="25" Foreground="White" Margin="0" FontWeight="Light"/>
        			</StackPanel>
        		</StackPanel>
        	</Grid>
        </ScrollViewer>

        <!-- Back button and page title -->
        <Grid x:Name="Header">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Style="{StaticResource PageHeaderTextStyle}" Text="Masala Dosa" Foreground="#FF5DF9FF"/>
            <Image x:Name="image" HorizontalAlignment="Right" VerticalAlignment="Center" Width="212" Source="Assets/HubPage/Logo.png" Margin="0,24.5,40,24.5" Grid.Column="1" Visibility="Collapsed"/>
        </Grid>
        <Grid x:Name="Snaped" HorizontalAlignment="Left" Height="100" Opacity="0" VerticalAlignment="Top" Width="100">
        	<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Opacity="0" TextWrapping="Wrap" Text="Please switch to full screen to view the details." VerticalAlignment="Top"/>
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="scrollViewer">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>-16,0,0,0</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="scrollViewer">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Collapsed</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Snaped" d:IsOptimized="True" To="1"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="Snaped">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<x:Int32>2</x:Int32>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="Snaped">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<x:Double>NaN</x:Double>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="Snaped">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<x:Double>NaN</x:Double>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="Snaped">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<HorizontalAlignment>Stretch</HorizontalAlignment>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)" Storyboard.TargetName="Snaped">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<VerticalAlignment>Stretch</VerticalAlignment>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock" d:IsOptimized="True" To="1"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)" Storyboard.TargetName="textBlock">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<VerticalAlignment>Center</VerticalAlignment>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="textBlock">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<HorizontalAlignment>Center</HorizontalAlignment>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.FontFamily)" Storyboard.TargetName="textBlock">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<FontFamily>Segoe UI</FontFamily>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetProperty="(TextBlock.FontSize)" Storyboard.TargetName="textBlock" d:IsOptimized="True" To="24"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="textBlock">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>10,0</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BottamApp">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Collapsed</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
